<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>微书店主页</title>
	<link rel="stylesheet" href="__PUBLIC__/mobile/jquery.mobile-1.4.5.min.css">
	<link rel="stylesheet" href="__PUBLIC__/styles/home.css">
	<script src="__PUBLIC__/scripts/jquery.min.js"></script>
	<script src="__PUBLIC__/mobile/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>

	<div data-role="page">
		<link rel="stylesheet" href="__PUBLIC__/styles/swiper-3.3.0.min.css">
		<include file="Common:menu" />
		<header data-role="header" data-position="fixed">
			<h1>主页</h1>
			<a href="#menu" class="ui-btn-right ui-btn ui-icon-bars ui-btn-icon-notext ui-shadow ui-corner-all" data-role="button" role="button">Menu</a>
		</header>

		<!-- begin main-->
		<main data-role="main" class="ui-content" >

			<!-- begin swiper -->
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<a href=""><img src="__PUBLIC__/images/banner01.png" alt=""></a>
					</div>
					<div class="swiper-slide">
						<a href=""><img src="__PUBLIC__/images/banner01.png" alt=""></a>
					</div>
					<div class="swiper-slide">
						<a href=""><img src="__PUBLIC__/images/banner01.png" alt=""></a>
					</div>
				</div>
				<!-- 如果需要分页器 -->
				<div class="swiper-pagination"></div>
			</div><!-- // end swiper -->


			<ul data-role="listview" class="listview"  style="margin: 0;">
				<volist  name="categorys" id="category">
				<li>
					<a href="{:U('/Home/Main/bookList', array('id'=>$category['id']))}">
						<img src="__ROOT__/Uploads/{$category.location}" alt="">
						<div class="book-text">
							<h2>{$category.name}</h2>
							<p>{$category.description}</p>
						</div>
					</a>
				</li>
				</volist>
			</ul>
		</main><!-- // end main -->

		<script src="__PUBLIC__/scripts/swiper-3.3.0.jquery.min.js"></script>
		<script>
			$(document).ready(function() {
				 var mySwiper = new Swiper ('.swiper-container', {
				    direction: 'horizontal',
				    loop: true,
				    // 如果需要分页器
				    pagination: '.swiper-pagination',
				 });
			});
		</script>
	</div>
</body>
</html>
